<template>
  <el-main>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="楼盘名称" prop="">
          <el-input v-model="ruleForm.premisesName" @blur="getPremisesInfoList" style="width: 200px" placeholder="楼盘名称"></el-input>
          <el-link href="http://localhost/house/add" type="primary" style="margin-right: 20px">添加楼盘</el-link>

        <el-radio-group v-model="ruleForm.status" style="margin-right: 50px">
          <el-radio label="0">整租</el-radio>
          <el-radio label="1">合租</el-radio>
        </el-radio-group>
        <el-radio-group v-model="ruleForm.roomStatus" style="width: 20%">
          <el-radio label="0">已出租</el-radio>
          <el-radio label="1">未出租</el-radio>
        </el-radio-group>
        </el-form-item>
      <el-form-item>
        楼栋号
        <el-input v-model="ruleForm.buildingNo" style="width: 15%;margin-right: 50px"></el-input>
        单元号
        <el-input v-model="ruleForm.unitNo" style="width: 15%;margin-right: 50px"></el-input>
        门牌号
        <el-input v-model="ruleForm.roomNo" style="width: 15%;margin-right: 50px"></el-input>
      </el-form-item>
      <el-form-item>
        户型
        <el-select v-model="ruleForm.room" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        室
        <el-select v-model="ruleForm.hall" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        厅
        <span style="margin-left: 10%">装修情况</span>
        <el-select v-model="ruleForm.decorate" style="width: 6%;">
          <el-option label="精装" value="0"></el-option>
          <el-option label="简装" value="1"></el-option>
          <el-option label="毛坯" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        楼层
        <el-input v-model="ruleForm.floor" style="width: 15%"/>
        共
        <el-input v-model="ruleForm.floorCount" style="width: 15%"/>
        层
      </el-form-item>
      <el-form-item>
        设置管家
        <el-select v-model="ruleForm.manager">
          <el-option v-for="item in stewards" :label="item.username" :value="item.userId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        房产面积
        <el-input v-model="ruleForm.proportion" style="width: 15%;margin-right: 50px"/>
      </el-form-item>
      <el-form-item>
        <span v-if="ruleForm.status==0">
          租金
        <el-input v-model="ruleForm.rental" style="width: 15%;margin-right: 50px"/>
        </span>
        付款方式:押
        <el-select v-model="ruleForm.paymentMortgage" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
        付
        <el-select v-model="ruleForm.paymentPay" style="width: 6%">
          <el-option v-for="item in this.ids" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        公共配套
        <el-checkbox-group v-model="publicIds">
          <el-checkbox v-for="item in publicFacilitys" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="ruleForm.status==0">
        房间配套
        <el-checkbox-group v-model="privateIds">
          <el-checkbox v-for="item in privateFacilitys" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item v-if="ruleForm.status==0">
        房间区域照片
        <el-upload
          class="avatar-uploader"
          action="http://localhost/dev-api/file/upload"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="handleAvatarSuccess">
          <img width="50px" height="50px" v-if="ruleForm.roomPicture" :src="ruleForm.roomPicture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        公共区域照片
        <el-upload
          class="avatar-uploader"
          action="http://localhost/dev-api/file/upload"
          :headers="myHeaders"
          :show-file-list="false"
          :on-success="handleAvatarSuccess2">
          <img width="50px" height="50px" v-if="ruleForm.housePicture" :src="ruleForm.housePicture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        房源介绍<textarea v-model="ruleForm.introduce" style="width: 1000px;height: 80px"></textarea>
      </el-form-item>
      <el-form-item>
        <span v-if="ruleForm.status==1">
        <el-button type="primary" @click="addRoom">添加房间</el-button>（您可在此添加具体分割出租的房间）
      </span>
      </el-form-item>
      <el-form-item style="margin-left: 30%;">
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
<!-- 添加房间 -->
    <el-dialog
      title="添加房间"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="装修风格">
          <el-input v-model="form.decorateStyle"></el-input>
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="form.proportion" style="width: 85%;"></el-input>
          平方米
        </el-form-item>
        <el-form-item label="朝向">
          <el-select v-model="form.direction">
            <el-option value="1" label="东"></el-option>
            <el-option value="2" label="南"></el-option>
            <el-option value="3" label="西"></el-option>
            <el-option value="4" label="北"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间配套">
          <el-checkbox-group v-model="privateIds">
            <el-checkbox v-for="item in privateFacilitys" :label="item.id" :value="item.id">{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="租金">
          <el-input v-model="form.rental" style="width: 90%;"></el-input>
          元/月
        </el-form-item>
        <el-form-item label="房间区域">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/dev-api/file/upload"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="handleAvatarSuccess3">
            <img width="50px" height="50px" v-if="form.roomPicture" :src="form.roomPicture" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addHouse">保存房源</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-main>
</template>

<script>
import {
  addHouse,
  addHousestyle,
  getPrivate,
  getPublic,
  getUserList, TbPremisesInfoList,
} from '@/api/business/room'
import {getToken} from "@/utils/auth";

  export default {
    name: "addFS",
    data() {
      return {
        myHeaders:{ 'Authorization': 'Bearer ' + getToken() },
        privateFacilitys: [],
        publicFacilitys: [],
        stewards: [],
        dialogVisible: false,
        privateIds:[],
        publicIds:[],
        ids: [1, 2, 3, 4, 5],
        form: {roomPicture: null},
        ruleForm: {status: '0',roomStatus:"1", roomPicture: null, housePicture: null},
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      toroom(){
        this.$router.push('list')
      },
      submitForm() {
        if(this.ruleForm.premisesName==null){
          alert("请选择楼盘名称")
        }else {
          this.ruleForm.publicIds = this.publicIds;
          this.ruleForm.privateIds = this.privateIds;
          this.ruleForm.type=0;//分散式
          addHouse(this.ruleForm).then(res => {
            if(res.code==500){
              this.$message.error(res.msg);
            }else {
              this.$message.success("添加成功")
              this.$router.push('room')
            }
          })
        }
      },
      getPremisesInfoList() {
        TbPremisesInfoList(this.ruleForm.premisesName).then(res => {
          console.log(res.data.length)
          if (res.data.length == 0){
            this.$message.error("该楼盘不存在")
          }else {
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      addHouse() {
        addHousestyle(this.form).then(rep=>{
          this.dialogVisible=false;
        })
      },
      addRoom() {
        this.dialogVisible = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      handleAvatarSuccess(res) {
        this.ruleForm.roomPicture = res.data.url;
      },
      handleAvatarSuccess2(res) {
        this.ruleForm.housePicture = res.data.url;
      },
      handleAvatarSuccess3(res) {
        this.form.roomPicture = res.data.url;
      },
      getPrivateFacility() {
        getPrivate().then(res => {
          this.privateFacilitys = res.data;
        })
      },
      getPublicFacility() {
        getPublic().then(res => {
          this.publicFacilitys = res.data;
        })
      },
      getSteward() {
        getUserList().then(res => {
          this.stewards = res.data;
        })
      }
    },
    created() {
      this.getPrivateFacility();
      this.getPublicFacility();
      this.getSteward();
    }
  }
</script>

<style scoped>

</style>
